<template>
<button class="bh-button" 
	:class="[
		type ? 'bh-button-' + type : '',
		buttonSize ? 'bh-button-' + buttonSize : '',
		{
			'is-disabled': buttonDisabled,
			'is-plain': plain,
			'is-round': round,
			'is-circle': circle,
		}
	]" 
	@click='handleClick'>
	<i :class="icon" v-if="icon"></i>
	<span v-if="$slots.default">
		<slot />
	</span>
</button>
</template>

<script>
export default {
	name: 'bh-button',
	props: {
		type: String,
		icon: {
			type: String,
			default: ''
		},
		size: String,
		disabled: Boolean,
		plain: Boolean,
		round: Boolean,
		circle: Boolean,
	},
	computed: {
		buttonSize() {
			return this.size;
		},
		buttonDisabled() {
			return this.disabled;
		}
	},
	methods: {
		handleClick(evt) {
			this.$emit('click', evt);
		}
    },
}
</script>
